<template>
	<view class="content">
		<u-form :model="form" ref="uForm" label-position="top" :border-bottom="false" :error-type="['toast']">
			<u-form-item maxlength="12" label="昵称" :border-bottom="false"><u-input :border="true" maxlength="15" v-model="form.name" /></u-form-item>
			<u-form-item label="性别" :border-bottom="false">
				<u-radio-group v-model="form.gender">
					<u-radio active-color="#0abde3" :name="0">男</u-radio>
					<u-radio active-color="#FF689B" :name="1">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="个人介绍" :border-bottom="false">
				<u-input type="textarea" maxlength="100" :clearable="false" height="120" v-model="form.description" :border="true" />
			</u-form-item>
			<u-form-item label="地区" :border-bottom="false">
				<u-input @click="openMap" :border="true" type="textarea" height="40" :auto-height="true" :disabled="true" v-model="form.address" placeholder="请选择地址" />
				<map
					v-if="!!form.longitude && !!form.latitude"
					scale="15"
					:longitude="form.longitude"
					:latitude="form.latitude"
					style="width: 100%; height: 500rpx;margin-top: 20rpx;"
					:markers="markers"
				></map>
			</u-form-item>
			<u-form-item v-show="!$status" label="照片墙" :border-bottom="false">
				<u-upload
					ref="uUpload"
					:action="action"
					name="file[]"
					:file-list="file"
					max-count="6"
					:max-size="10 * 1024 * 1024"
					@on-success="upload"
					:before-upload="beforeUpload"
					@on-uploaded="onUploaded"
					@on-remove="onRemove"
				></u-upload>
			</u-form-item>
		</u-form>
		<u-toast ref="uToast" />
		<view class="fiexd_btn"><u-button @click="editInfo" :loading="loading" type="primary">保存</u-button></view>
	</view>
</template>

<script>
import { upload } from '@/api/index.js';
import { shoot_add, my_info, edit_info } from '@/api/user.js';
export default {
	data() {
		return {
			action: upload,
			fileList: [],
			file: [],
			disabled: false,
			loading: false,
			form: {
				title: '',
				gender: '',
				description: '',
				address: '',
				longitude: '',
				latitude: ''
			},
			markers: []
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		this.getInfo();
	},
	methods: {
		click() {
			console.log('授权');
			uni.requestSubscribeMessage({
				tmplIds: ['zyZdEzlVVyHTFs5Ipo_chLq248WQYZ4QnwCdMG8EF6Y'],
				success(res) {
					console.log('授权成功');
				}
			});
		},
		getInfo() {
			//获取用户信息
			my_info().then(res => {
				if (res.code == 200) {
					this.form = res.data;
					this.markers[0] = this.thisMap(res.data);
					if (res.data.photo != '') {
						this.fileList = res.data.photo.split(',').map(item => {
							return {
								url: item
							};
						});
						this.file = res.data.photo.split(',').map(item => {
							return {
								url: item
							};
						});
					}
					uni.setStorageSync('userInfo', res.data);
				}
			});
		},
		editInfo() {
			//修改用户信息
			if (this.disabled) {
				return this.$refs.uToast.show({
					title: '上传未完成！',
					type: 'error'
				});
			}
			edit_info({
				...this.form,
				photo: this.fileList.map(i => i.url).join(',')
			}).then(res => {
				console.log(res, '修改信息');
				if (res.code == 200) {
					uni.$emit('update_user_info'); //刷新用户信息
					this.$refs.uToast.show({
						title: res.data,
						type: 'success'
					});
				} else {
					this.$refs.uToast.show({
						title: res.data,
						type: 'error'
					});
				}
			});
		},
		openMap() {
			//打开地图选择器
			uni.chooseLocation({
				success: res => {
					if (res.address) {
						this.form.address = res.address + res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
						this.markers[0] = this.thisMap(res);
					}
				}
			});
		},
		thisMap(res) {
			return {
				width: 20,
				height: 20,
				id: res.id,
				longitude: res.longitude,
				latitude: res.latitude,
				iconPath: '../../static/img/map/bind.png',
				callout: {
					content: '标记的位置',
					color: '#fff',
					bgColor: '#4CD964',
					padding: '5',
					borderRadius: '20',
					display: 'BYCLICK'
				}
			};
		},
		upload(res, index, lists, name) {
			//图片上传成功
			this.fileList.push({
				url: res.data
			});
		},
		onUploaded() {
			//所有图片上传完成
			this.disabled = false;
		},
		beforeUpload() {
			//上传中 设置不可提交
			this.disabled = true;
			return true;
		},
		onRemove(index, lists, name) {
			this.fileList.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 0 30rpx 150rpx;
	.fiexd_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 25rpx 30rpx;
		background-color: #fff;
		z-index: 99;
		box-shadow: 0 0rpx 10rpx 0 #ddd;
	}
}
</style>
